import React, {Component} from 'react'
import './index.css'

export default class Router extends Component{
    state = {
        sendObj: {
            id: '1',
            name: '产品1'
        }
    }
    render(){
        const { id, name } = this.state.sendObj
        const { history } = this.props
        return (
            <div className='router-container'>
                <div>
                    当前id: { id }&nbsp;&nbsp;&nbsp;
                    当前name: { name }
                </div>
                <br/>
                路由传值的三种方式:

                <div className="param">
                    {/* 向路由组件传递params参数 */}
                    {/* <Link to={`/layout/router-param/${id}/${name}`}>param传值</Link> */}
                    <button onClick={() => history.push(`/layout/router-param/${id}/${name}`)}>
                        param传值
                    </button>
                </div>

                <div className="search">
                    {/* 向路由组件传递search参数 */}
                    {/*<Link to={`/layout/router-search/?id=${id}&name=${name}`}>search传值</Link>*/}
                    <button onClick={() => history.push(`/layout/router-search/?id=${id}&name=${name}`)}>
                        search传值
                    </button>
                </div>

                <div className="state">
                    {/* 向路由组件传递state参数 */}
                    {/*<Link to={{pathname:'/layout/router-state',state:{id, name}}}>state传值</Link>*/}
                    <button onClick={() => history.push({pathname: `/layout/router-state`, state: {id,name}})}>
                        state传值
                    </button>
                </div>
            </div>
        )
    }
}
